﻿@{
    Layout = "~/Views/Shared/BE/_Admin_Layout.cshtml";
}

<article class="module width_3_quarter">
<div id="UsersTable"></div>
</article>

<script type="text/javascript">

    $(document).ready(function () {

        //Prepare jtable plugin
        $('#UsersTable').jtable({
            //...
            selecting: true, //Enable selecting
            multiselect: true, //Allow multiple selecting
            selectingCheckboxes: true, //Show checkboxes on first column
            defaultSorting: 'UserName DESC',
            sorting: true,
            paging: true,
            pageSize: 10,

            title: 'Danh sách thành viên',
            actions: {
                listAction: '@Url.Action("ListUser")',
                deleteAction: '@Url.Action("DeleteUser")',
                updateAction: '@Url.Action("UpdateUser")',
                createAction: '@Url.Action("CreateUser")'
            },
            fields: {
                UserID: {
                    key: true,
                    create: false,
                    edit: false,
                    list: false
                },
                UserName: {
                    title: 'Tên đăng nhập',
                    inputClass: 'validate[required,minSize[4],maxSize[20]]'
                },
                Password: {
                    title: 'Mật khẩu',
                    type: 'password',
                    visibility: 'hidden',
                    inputClass: 'validate[required,minSize[6]]',
                    list: false
                },
                Email: {
                    title: 'Email',
                    width: '40%',
                    inputClass: 'validate[required,maxSize[50],custom[email]]'
                },
                RoleID: {
                    title: 'Role',
                    options: '@Url.Action("GetRoleOptions")'
                },
                Gender: {
                    title: 'Gender',
                    options: { 'M': 'Nam', 'F': 'Nữ', 'NA':'Unknown' }
                },
                DOB: {
                    title: 'Ngày sinh',
                    displayFormat: 'dd-mm-yy',
                    type: 'date',
                    visibility: 'hidden',
                    list: false,
                    inputClass: 'validate[required,custom[Isdate]]'
                },
                FullName: {
                    title: 'FullName',
                    visibility: 'hidden',
                    list: false
                },
                ChattingID: {
                    title: 'ChattingID',
                    visibility: 'hidden',
                    list: false
                },
                Phone: {
                    title: 'Phone',
                    visibility: 'hidden',
                    list: false
                },
                UserURL: {
                    title: 'UserURL',
                    visibility: 'hidden',
                    list: false
                },
                AvatarURL: {
                    title: 'AvatarURL',
                    visibility: 'hidden',
                    list: false,
                    create: false
                },
                IsActive: {
                    title: 'IsActive',
                    visibility: 'hidden',
                    create: false,
                    edit: false,
                    list: false,
                    defaultValue: 1
                }
            },
            //Initialize validation logic when a form is created
            formCreated: function (event, data) {
                data.form.validationEngine();
                
            },
            //Validate form when it is being submitted
            formSubmitting: function (event, data) {
                return data.form.validationEngine('validate');
            },
            //Dispose validation logic when form is closed
            formClosed: function (event, data) {
                data.form.validationEngine('hide');
                data.form.validationEngine('detach');
            }
        });
        //Re-load records when user click 'load records' button.
        $('#LoadRecordsButton').click(function (e) {
            e.preventDefault();
            $('#UsersTable').jtable('load', {
                keywords: $('#name').val(),
            });
        });

        //Load person list from server
        $('#UsersTable').jtable('load');
        
        //
        //Delete selected students
        $('#DeleteAllButton').button().click(function () {
            var $selectedRows = $('#UsersTable').jtable('selectedRows');
            $('#UsersTable').jtable('deleteRows', $selectedRows);
        });
    });

</script>

